<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%-- <%@ taglib prefix="sjm" uri="/struts-jquery-mobile-tags"%> --%>
<%-- <%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%> --%>
<%@taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords"
	content="struts2, twitter, bootstrap, plugin, showcase" />
<meta name="description" content="Panel de Logueo" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Joseph Huckaby">
<title>Registrar Fotografia</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
<sj:head jqueryui="true" />
<style type="text/css">
body {
	padding-top: 60px;
	/* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="js/scriptcam.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#webcam").scriptcam({
			showMicrophoneErrors : false,
			onError : onError,
			cornerRadius : 20,
			disableHardwareAcceleration : 1,
			cornerColor : 'e3e5e2',
			onWebcamReady : onWebcamReady,
			onPictureAsBase64 : base64_tofield_and_image
		});
	});
	function base64_tofield() {
		$('#formfield').val($.scriptcam.getFrameAsBase64());
	};
	function base64_toimage() {
		$('#image').attr("src",
				"data:image/png;base64," + $.scriptcam.getFrameAsBase64());
	};
	function base64_tofield_and_image(b64) {
		$('#formfield').val(b64);
		$('#image').attr("src", "data:image/png;base64," + b64);
	};
	function changeCamera() {
		$.scriptcam.changeCamera($('#cameraNames').val());
	}
	function onError(errorId, errorMsg) {
		$("#btn1").attr("disabled", true);
		$("#btn2").attr("disabled", true);
		alert(errorMsg);
	}
	function onWebcamReady(cameraNames, camera, microphoneNames, microphone,
			volume) {
		$.each(cameraNames, function(index, text) {
			$('#cameraNames').append(
					$('<option></option>').val(index).html(text))
		});
		$('#cameraNames').val(camera);
	}
</script>
<link href="estilointro/contenedorintro.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript">
	function MM_swapImgRestore() { //v3.0
		var i, x, a = document.MM_sr;
		for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++)
			x.src = x.oSrc;
	}

	function MM_findObj(n, d) { //v4.01
		var p, i, x;
		if (!d)
			d = document;
		if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
			d = parent.frames[n.substring(p + 1)].document;
			n = n.substring(0, p);
		}
		if (!(x = d[n]) && d.all)
			x = d.all[n];
		for (i = 0; !x && i < d.forms.length; i++)
			x = d.forms[i][n];
		for (i = 0; !x && d.layers && i < d.layers.length; i++)
			x = MM_findObj(n, d.layers[i].document);
		if (!x && d.getElementById)
			x = d.getElementById(n);
		return x;
	}

	function MM_swapImage() { //v3.0
		var i, j = 0, x, a = MM_swapImage.arguments;
		document.MM_sr = new Array;
		for (i = 0; i < (a.length - 2); i += 3)
			if ((x = MM_findObj(a[i])) != null) {
				document.MM_sr[j++] = x;
				if (!x.oSrc)
					x.oSrc = x.src;
				x.src = a[i + 2];
			}
	}
	function MM_openBrWindow(theURL, winName, features) { //v2.0
		window.open(theURL, winName, features);
	}
	function MM_preloadImages() { //v3.0
		var d = document;
		if (d.images) {
			if (!d.MM_p)
				d.MM_p = new Array();
			var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
			for (i = 0; i < a.length; i++)
				if (a[i].indexOf("#") != 0) {
					d.MM_p[j] = new Image;
					d.MM_p[j++].src = a[i];
				}
		}
	}
</script>
</head>

<body>
	<div align="center">
		<table>
			<tr>
				<td colspan="2"><div id="webcam"></div>
					<div>
						<img src="js/webcamlogo.png" style="vertical-align: text-top" />
						<select id="cameraNames" size="1" onChange="changeCamera()">
						</select>
					</div></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td colspan="2"><div>
						<p>
							<button class="btn btn-small" id="btn1"
								onclick="base64_tofield();base64_toimage()">Tomar
								Fotografia</button>
						</p>
					</div></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td colspan="2"><s:form id="formulario_paciente"
						action="aGuardarFotoPaciente" enctype="multipart/form-data"
						theme="bootstrap" method="post" cssClass="well form-inline">
						<div>
							<p>
								<s:hidden id="formfield" name="imagenMascotaText" />
							</p>
							<p>
								<img id="image" name="datos" />
							</p>
							<sj:submit value="Registrar Foto" button="true" />
						</div>
					</s:form></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td><s:form id="pasar_formulario" action="aPasarDatosUnir"
						enctype="multipart/form-data" theme="bootstrap" method="post"
						cssClass="well form-inline">
						<sj:submit value="Terminar" button="true" />
					</s:form></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</div>
</body>
</html>
